<script type="text/javascript" charset="utf-8">
<?php if ($this->isOwner) { ?>
    function onGroupFilterUp() {
        var value = $("#groupFilter").val().toLowerCase();
        var listChildren = $("#group-element > label");
        for (var i = 0; i < listChildren.length; i++) {
            var child = $(listChildren[i]);
            if (child.text().toLowerCase().indexOf(value) == -1) {
                child.hide();
                child.next().hide();
            } else {
                child.show();
                child.next().show();
            }
        }
        $("#group-element > label:visible input").first().attr("checked", "checked");
    }

    function onGroupSubmitClick() {
        var form = $("form#addToGroup");
        $.post(form.attr("action"),
            form.serialize(), function(data) {
                var unlinkA = "<a class=\"unlinkA\" href=\"" + data.unlinkUrl +
                    "\"><img src=\"/images/cross .png\" height=\"25\" width=\"25\" alt=\"Unlink!\"/></a>";
                var newElem = $("<li><a href=\"" + data.url + "\">" +
                    data.name + "</a> " + unlinkA + "</li>").appendTo("#elementGroups");
                $(newElem).children(".unlinkA").click(onUnlinkClick);
            });
        $("#addToGroupCtnr").hide();
        return false;
    }
    
    function fixImgSize(img) {
        var src = img.attr('src');
        var temp = new Image();
        temp.src = src;
        temp.onload = function(){
            if (temp.width < img.width()) {
                img.attr('width', temp.width);
            }
        };
        
    }

    function onUnlinkClick() {
        var li = $(this).parent();
        $.post($(this).attr("href"), null, function(data) {
            if (data.success) {
                li.hide();
            }
        });
        return false;
    }
<?php } ?>
    $(document).ready(function() {
<?php if ($this->isOwner) { ?>
        $("#groupFilter").keyup(onGroupFilterUp);
        $("#addGroupSubmit").click(onGroupSubmitClick);
        $("#addToGroupCtnr").hide();
        $("#showAddGroupForm").click(function() {
            $("#addToGroupCtnr").toggle();
            return false;
        });
        $(".unlinkA").click(onUnlinkClick);
<?php } ?>
        $("#new_comment").val("#e<?php echo $this->element->id(); ?>:");
        
        // image size fix
        fixImgSize($('#img-view'))
    });
</script>
<?php
echo "<h2>" . $this->element->name() . ".</h2>";
?>
<div id="element_description">
<h3>Groups:</h3>
<ul id="elementGroups">
<?php
        foreach ($this->element->groups() as $group) {
            $url = $this->url(array("id" => $group->id()), "groupview", true);
            $unlinkUrl =  $this->url(array("id" => $this->element->id(),
                "gid" => $group->id()), "unlink", true);
            echo "<li class=\"groupTitle\"><a href=\"$url\">" . $group->name() . "</a>";
            if ($this->isOwner) {
                echo '<a class="unlinkA" href="' . $unlinkUrl . '"><img src="/images/cross .png" height="20" width="20" alt="Delete!"/></a>';
            }
            echo "</li>";
        }
?>
</ul>
<?php if ($this->isOwner) { ?><a id="showAddGroupForm" href="#">Add another group</a><?php } ?>
<?php if ($this->isOwner) { ?>

<div id="addToGroupCtnr">
    <div id="group_filter"><label id="filter-label" for="groupFilter">Filter : </label><input type="text" id="groupFilter" /><br /></div>

    <?php echo $this->addToGroupForm; ?>
    <div class="clear">&nbsp;</div>
    <button id="addGroupSubmit">Add</button>
</div>

</div>
<div id="element_block">
<?php }

if ($this->element->type() == "video") {
?>
    <div style="text-align: center;">
        <object style="height: 390px; width: 640px">
            <param name="movie" value="http://www.youtube.com/v/<?php echo $this->element->tech_id(); ?>?version=3">
            <param name="allowFullScreen" value="true">
            <param name="allowScriptAccess" value="always">
            <embed src="http://www.youtube.com/v/<?php echo $this->element->tech_id(); ?>?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"/>
        </object>
        <p>
            <?php
                $desc = $this->element->description();
                echo nl2br($desc); 
            ?>
        </p>
    </div>
<?php
} elseif ($this->element->type() == "torrent") {
    echo "<p>Display torrent components here...</p>";
} elseif ($this->element->type() == "link") { ?>
    <h2><a href="<?php echo $this->element->link(); ?>">Go to <?php echo $this->element->name(); ?></a></h2>
    <img src="<?php echo $this->element->get_image_uri() ?>" alt="<?php echo $this->element->name(); ?>" />
    <p>
        <?php echo nl2br($this->element->description()); ?>
    </p>
<?php
} elseif ($this->element->type() == "image") { ?>
    <a href="<?php echo $this->element->get_image_uri(); ?>">
        <img width="512px" id="img-view" src="<?php echo $this->element->get_image_uri(); ?>" alt="<?php echo $this->element->name(); ?>"/>
    </a>
    <p>
        <?php echo nl2br($this->element->description()); ?>
    </p>
    <h2>Comments</h2>
<?php
}
echo $this->action("elementcomments", "social", null, array("id" => $this->element->id()));
?>
</div>